<template>
  <div class="main-content" >
    <div>

      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in imgData" :key="item">
          <img :src="item" class="home-carousel">
        </el-carousel-item>
      </el-carousel>


    </div>
    <div>
      <div class="home-recommend" >
        <span class="home-recommend-title" >推荐</span>
        <a class="home-recommend-more" href="/front/merchant">查看更多信息</a>
      </div>
      <div class="home-recommend-content">
        <el-row>

          <el-col :span="8" v-for="item in merchantData">
            <img  :src="item.avatar"class="recommend-img" @click="navToDetail(item.id)">
            <p>{{item.name}}</p>
            <p class="home-recommend-address">{{item.address}}</p>
          </el-col>

        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
import carousel_1  from "@/assets/imgs/carousel_1.png"
import carousel_2  from "@/assets/imgs/carousel_2.png"
import request from "@/utils/request";
export default {
  data() {
    return {
      merchantData:[],
      imgData:[
        carousel_1,carousel_2
      ]

    }
  },
  mounted() {
    this.loadMerchant()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadMerchant(){
      request.get("/merchant/selectRecommend").then(res=>{
        if (res.code=='0'){
          console.log(res.data)
          this.merchantData=res.data
        }

      })
    },
    navToDetail(id){
      this.$router.push({name:"MerchantDetail",query:{id:id}})
    },
  }
}
</script>
<style>

</style>